import { jdoo, html } from "./jdoo.js";
import { render } from "./libs/fre.js"


let tpl = html`
          <div key="1" ref="2" class="{{css}}">For Test {{me.state.count}}</div>
          <button type="button" onclick="update">-</button> 
          <t t-if="props.readonly">
                a
          </t>
          <t t-else="">
                b
          </t>
        `;

console.log(tpl)


jdoo.component("Test", {
    init() {
        this.state = this.useState({ count: this.count ?? 12 });
    },
    render() {
        let me = this;
        return html`
          <div class="${me.class}">For Test${me.state.count}</div>
          <button type="button" onclick="${()=>me.update()}">-</button> 
        `;
    },
    update(){
        let me = this;
        me.state.count -= 1;
        if(me.$p){
            console.log(me.$p)
            me.$p.setValue(me.state.count);
        }
    }
});
jdoo.component("Test", {
    extends: 'Test',
    init() {
        this.state = this.useState({ count: this.count ?? 10 });
    }
});
jdoo.component("mom.View", {
    min: -2,
    max: 2,
    init() {
        this.state = this.useState({ count: 2 });
    },
    render() {
        let me = this;
        return html`
          <${Test} count='${me.state.count}' class="test"/>
          <${Test} $p='${this}'/>
          <div class="box level" style="display:flex">
            <div class="level-item">
              <button type="button" class="button ${me.state.count > 0 ? 'x' : 'y'}"
                disabled="${me.state.count <= me.min}"
                onclick="${() => me.state.count -= 1}">-</button>      
            </div>
            <div class="level-item">
              <span class="title">${me.state.count}</span>
            </div>
            <div class="level-item">
              <button type="button" class="button"
                disabled="${me.state.count >= me.max}"
                onclick="${() => me.state.count += 1}">+</button>
            </div>
            <input style="display:${me.state.count > 0 ? 'block' : 'none'}"
                type="text" value="${me.state.count}" 
                onchange="${(e) => me.setValue(e.target.value)}"/>
          </div>
        `;
    },
    setValue(value) {
        this.state.count = Number(value);
    },
});

jdoo.component("mom.View", {
    extends: 'mom.View',
    setValue(value) {
        this.callSuper(value);
        console.log('super1')
    },
});

jdoo.component("mom.View", {
    extends: 'mom.View',
    setValue(value) {
        this.callSuper(value);
        console.log('super2')
    },
});

new mom.View({min:-10}).mount(document.body);
//render(html`<${mom.View} min='-5' max='5'/>`, document.body)
//render(html`<${mom.View}/>`, document.body)
//render(html`<${mom.View}/>`, document.body)
// for (let i = 0; i < 500; i++)
//     render(html`<${mom.View}/>`, document.body)
